<template>
 <div class="container" >
    <div class="table">
        <div class="tr" v-for="(item) in radioList" :key="item.value">
            <input v-model="groupNum" type="radio" :value="item.value"/>
            <span v-text="item.lable"></span>
        </div>
    </div>

    <div >
        <div v-if="groupNum == 1">1组</div>
        <div v-else-if="groupNum == 2">2组</div>
        <div v-else>其他</div>
    </div>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    groupNum:1,
    radioList:[
        {
            value:1,
            lable:'1组'
        },
        {
            value:2,
            lable:'2组'
        },
        {
            value:3,
            lable:'3组'
        },
        {
            value:4,
            lable:'4组'
        },
        {
            value:5,
            lable:'5组'
        },
        {
            value:6,
            lable:'6组'
        },
    ]
 }
 },
 methods:{
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 50px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
 .table{
    display: flex;
 flex-direction: column;
 }
</style>